<template>
    <div class="mapbox">
        <div style="position: relative;width: 100%;height: 11.1vh;">
            <el-button @click="clearallpoint">清空当前坐标</el-button>
            <el-button v-if="!handAdd" @click="handAdd = !handAdd">添加坐标</el-button>
            <el-button v-if="handAdd" @click="addTrue">确认添加</el-button>
            <el-button v-if="handAdd" @click="addFalse" type="danger">取消</el-button>
            <span v-if="handAdd">&nbsp;&nbsp;&nbsp;当前位置 : &nbsp;&nbsp;</span>
            <span v-if="handAdd">&nbsp;精度 : {{ polygonAdd.lng }}&nbsp;</span>
            <span v-if="handAdd">&nbsp;纬度 : {{ polygonAdd.lat }}&nbsp;</span>
            <div v-if="handAdd">&nbsp;&nbsp;当前位置 : {{ polygonIndex }}</div>
            <el-button @click="updateTrue" type="success" v-if="!handAdd">确认修改</el-button>
            <div style="height: 1vh;width: 100%;"></div>
        </div>
        <baidu-map :center="center" :zoom="zoom" @ready="handler" style="height: 600px" @click="getClickInfo"
            :scroll-wheel-zoom="true">
            <bm-marker v-for="(item, index) in polygonPath2" :key="index" :position="{ lng: item.lng, lat: item.lat }"
                :dragging="handEdit" animation="BMAP_ANIMATION_BOUNCE" @click="get_marker_information" @dragend="dragend">

             
            </bm-marker>
            <bm-marker :position="polygonAdd" v-if="handAdd"></bm-marker>
            <bm-polygon :path="polygonPath" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="10" :editing="true"
                @lineupdate="updatePolygonPath" />

        </baidu-map>
    </div>
</template>
   
<script>
export default {
    name: 'vueBmapdemo',
    // 组件参数 接收来自父组件的数据
    props: {
        // addressxy:['addressxy'],
        addressxy: {
            type: Array,
            default: [] //接收数据时给定一个默认值 
        }
    },
    data() {
        return {
            //初始地图中心坐标
            center: { lng: 118.83, lat: 31.95 },
            //初始地图精确度大小
            zoom: 13,
            dialogVisible: false,
            //坐标集合
            polygonPath: [
               
            ],
            //坐标点
            polygonPath2: [
                
            ],
            //添加的坐标点
            polygonAdd: { lng: 0, lat: 0 },
            //添加的位置
            polygonIndex: '',
            //添加坐标
            handAdd: false,
            //修改坐标
            handEdit: false,
        }
    },
    mounted: function () {
    },
    created() {
        this.polygonPath = this.addressxy;
        this.polygonPath2 = this.addressxy;
    },
    methods: {
        handler({ BMap, map }) {
            // console.log(BMap, map);
        },
        getClickInfo(e) {
            if (this.handAdd) {
                this.polygonAdd.lng = e.point.lng;
                this.polygonAdd.lat = e.point.lat;
                this.getAddressx(e);
            }

            // this.polygonPath.push({ lng: e.point.lng, lat: e.point.lat })
        },
        //每次移动坐标将坐标的值重新计算
        updatePolygonPath(e) {
            this.polygonPath = e.target.getPath();
            this.polygonPath2 = e.target.getPath();

        },
        //点击图标发生的事件
        get_marker_information(address) {

            console.log("点击坐标");
        },
        //移动图标发生的事件
        dragend(e) {
            console.log(e);
        },
        //确认添加的函数
        addTrue() {
            if (this.polygonAdd.lng === 0 && this.polygonAdd.lat === 0) {
                return;
            }
            this.polygonPath.push({
                lng: this.polygonAdd.lng,
                lat: this.polygonAdd.lat
            })
            this.polygonPath2.push({
                lng: this.polygonAdd.lng,
                lat: this.polygonAdd.lat
            })
            this.polygonAdd.lng = 0;
            this.polygonAdd.lat = 0;
            this.polygonIndex = '';
            this.handAdd = false;
        },
        //取消添加
        addFalse() {
            this.handAdd = false;

        },
        //清空所有坐标
        clearallpoint() {
            this.polygonPath = [];
            this.polygonPath2 = [];
        },
        //修改部队的实现
        updateTrue() {
            this.$emit('rectionMap', this.polygonPath2);

        },
        //获取地址的函数
        getAddressx(e) {
            // 创建地理编码实例
            const myGeo = new BMap.Geocoder();
            var pt = new BMap.Point(e.point.lng, e.point.lat);
            myGeo.getLocation(pt, (point) => {
                if (point) {
                    let adr = point.addressComponents
                    this.polygonIndex = adr.province + adr.city + adr.district + adr.street + adr.streetNumber // 省市区街道门牌号
                    // console.log(rs.surroundingPois);
                    for (let i in point.surroundingPois) {
                        this.polygonIndex = this.polygonIndex + "-" + point.surroundingPois[i].title
                    }

                } else {
                    // 地理编码失败
                    that.$message({
                        message: '地理编码失败',
                        type: 'error'
                    })
                }
            }, '全国');
        },
    }
}
</script>
  